<template>
	<view style="width: 100%;height: 112rpx;background: #FFFFFF;position: fixed;bottom: 0;display: flex;align-items: center;justify-content:space-between;padding:0 56rpx; box-sizing: border-box;border-top:1px solid #dedede;z-index:999">
		<view class="tabs-item tab1" @click="itemClick(1)">
			<view>
				<image src="./menu/tab5.png" v-if="aciveTab == 1" style="width: 56rpx;height: 56rpx;"></image>
				<image src="./menu/tab1.png"  v-else style="width: 56rpx;height: 56rpx;"></image>
			</view>
			<view>
				首页
			</view>
		</view>
		
		<view class="tabs-item tab2" @click="itemClick(2)">
			<view>
				<image src="./menu/tab6.png"  v-if="aciveTab == 2"  style="width: 56rpx;height: 56rpx;"></image>
				<image src="./menu/tab2.png" v-else style="width: 56rpx;height: 56rpx;"></image>
			</view>
			<view>
				课程学习
			</view>
		</view>
		
		<view class="tabs-item tab3" @click="itemClick(3)">
			<view>
			<image src="./menu/tab7.png" v-if="aciveTab == 3" style="width: 56rpx;height: 56rpx;"></image>
			<image src="./menu/tab3.png"  v-else style="width: 56rpx;height: 56rpx;"></image>
			</view>
			<view>
				在线考试
			</view>
		</view>
		
		<view class="tabs-item tab4" @click="itemClick(4)">
			<view>
			<image src="./menu/tab8.png" v-if="aciveTab == 4" style="width: 56rpx;height: 56rpx;"></image>
			<image src="./menu/tab4.png"  v-else  style="width: 56rpx;height: 56rpx;"></image>
			</view>
			<view>
				我的
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				aciveTab:'1',
			}
		},
		props:{
			active:{
				type:String,
				default:'1'
			}
		},
		watch:{
			active:{
				handler(val){
					this.aciveTab =val
				},
				immediate: true
			}
		},
		methods:{
			itemClick(item){
				this.aciveTab = item
				if(this.aciveTab == 1){
					uni.reLaunch({
						url:'../../pages/home/home'
					})
				}else if(this.aciveTab == 2){
					uni.reLaunch({
						url:'../../pages/curriculum/curriculum'
					})
				}else if(this.aciveTab == 3){
					uni.reLaunch({
						url:'../../pages/exam/exam'
					})
				}else if(this.aciveTab == 4){
					uni.reLaunch({
						url:'../../pages/mycenter/mycenter'
					})
				}
			}
		}
	}
</script>

<style>
	.tabs-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14rpx;
	}
</style>
